<html>
<head>
    <script src="/socket.io/socket.io.js"></script>
    <script>

        var socket = io.connect('http://localhost:8012');
        socket.on('InitialData', function (data) {
            //alert(data.Message);
        });

        socket.on('messageRecieve', function (data) {//receive broadcasted message from server
            AppendMessage(data.msg);
        });



        function SendMessage() {// sends the message from client to the server
            var message = document.getElementById('text').value;
            socket.emit('sendMessage', { msg: message });
            AppendMessage(message);
        }

        function AppendMessage(text) {// Appends messages to the div
            var div = document.getElementById('Messages');
            var newcontent = document.createElement('div');
            newcontent.innerHTML = text;

            div.appendChild(newcontent);
        }
    </script>
</head>
<body>
    <h1>
        Welcome to socket.io .....</h1>
    <div id="Messages">
        
    </div>
    <input id="text" type="text" />
    <input type="button" value="send" onclick="SendMessage()" />
</body>
</html>
